<template>
  <div>
    <ul class="group-box">
      <li class="t-center cursor-pointer one-line-ellipsis" :class="activeTab == item.primaryKey ? 'active' : ''" v-for="item in list" :key="item.primaryKey" @click="tabClick(item)">{{ item.name }}</li>
    </ul>
  </div>
</template>
<script>
  import lodash from 'lodash';
  import { apiProjectList } from '@a/about';

  export default {
    props: {},
    data() {
      return {
        list: [
          { primaryKey: 1, name: '集团1' },
          { primaryKey: 2, name: '集团1' },
          { primaryKey: 3, name: '集团1' },
        ],
        activeTab: '',
      };
    },
    methods: {
      async getInfo() {
        let res = await apiProjectList();
        res.rows.unshift({
          name: '集团',
          primaryKey: null,
        });
        this.activeTab = res.rows[0].primaryKey;
        this.list = res.rows || [];
        this.$emit('cutItem', this.activeTab);
      },

      tabClick(item) {
        this.activeTab = item.primaryKey;
        this.$emit('cutItem', item.primaryKey);
      },
    },

    mounted() {
      this.getInfo();
    },
  };
</script>

<style lang="scss" scoped>
  // .group-box::-webkit-scrollbar {
  //   display: none;
  // }
  .group-box {
    width: 150px;
    // max-height: 550px;
    overflow-y: auto;
    li {
      line-height: 40px;
    }
    .active {
      color: #3384fe;
      background: rgba(51, 132, 254, 0.1);
      border-radius: 3px;
    }
  }
</style>
